<template lang="">
  <div class="page" style="height: height;">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="pages">
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="username" placeholder="账号" class="username" />
        <van-field v-model="password" type="password" name="password" placeholder="密码" class="username" />
        <van-field v-model="yzm" type="number" name="captcha_code" placeholder="验证码" class="username" />
        <div class="imgLogin"><img :src="imgurl" alt="" class="img1"></div>
        <div class="smallTip">
          <div>看不请</div>
          <div @click="clickAction">换一张</div>
        </div>
        <div class="tips">
          <div class="span1">温馨提示：未注册的账号，登录时将自动注册</div>
          <div class="span2">注册过的用户可凭账号密码登录</div>
          <div class="sumbit">
            <van-button block type="info" native-type="submit">
              登录
            </van-button>
          </div>
          <p>重置密码?</p>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
  import Nav from "@/components/Nav.vue";
  export default {
    name: "Loginl",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '密码登录',
        right_name: '',
        username: '',
        password: '',
        yzm: '',
        height: this.$height,
        imgurl: "",
        info: [],
        show: false,
      }
    },
    components: {
      Nav,
    },
    methods: {
      onSubmit(values) {
        this.show = true
        if (values.username == "") {
          this.$toast({
            message: '请输入手机号/邮箱/用户名',
            icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600786128292&di=10cccf866278913caf1a09177e5fdfe3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_pic%2F19%2F04%2F09%2Ff317f2ab56c199231df8a92aaac4ec2c.jpg',
          })
        } else if (values.password == "") {
          this.$toast({
            message: '请输入密码',
            icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600786128292&di=10cccf866278913caf1a09177e5fdfe3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_pic%2F19%2F04%2F09%2Ff317f2ab56c199231df8a92aaac4ec2c.jpg',
          });
        } else if (values.username != "" && values.password != "" && values.yzm == "") {
          this.$toast({
            message: '请输入验证码',
            icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600786128292&di=10cccf866278913caf1a09177e5fdfe3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_pic%2F19%2F04%2F09%2Ff317f2ab56c199231df8a92aaac4ec2c.jpg',
          });
        }

        this.axios.post("https://elm.cangdu.org/v2/login", {
          username: values.username,
          password: values.password,
          captcha_code: values.captcha_code,
        }).then(res => {
          console.log(res.data.username);
          if (res.data.message == undefined) {
            this.$router.push({ name: "Mine" })
          } else if (res.data.message == "密码错误") {
            this.$toast({
              message: '密码错误',
              icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600786128292&di=10cccf866278913caf1a09177e5fdfe3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_pic%2F19%2F04%2F09%2Ff317f2ab56c199231df8a92aaac4ec2c.jpg',
            });
          } else {
            this.$toast({
              message: '验证码错误',
              icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600786128292&di=10cccf866278913caf1a09177e5fdfe3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_pic%2F19%2F04%2F09%2Ff317f2ab56c199231df8a92aaac4ec2c.jpg',
            });
          }
        })
      },
      clickAction() {
        this.axios.post("https://elm.cangdu.org/v1/captchas").then(((res) => {
          this.imgurl = res.data.code;
        })).catch((err) => {
          console.log(err)
        })
      }
    },
    mounted() {
      this.axios.post("https://elm.cangdu.org/v1/captchas").then(((res) => {
        this.imgurl = res.data.code;
      })).catch((err) => {
        console.log(err)
      })
    },
    beforeRouteLeave(to, from, next) {
      if (this.$cookie.get('name')) {
        this.$router.push({ name: from.name });
        next();
      } else {
        next();
      }
    },
  }
</script>

<style lang="less" scoped>
  .username {
    line-height: 30px;
    height: 50px;
    font-size: 16px;
    border-bottom: 1px solid gainsboro;
  }

  .pages {
    position: relative;
    top: 44px;
    padding-bottom: 10px;
  }

  .tips {
    padding: 15px;
    background-color: #f5f5f5;
    color: red;
    height: 170px;
  }

  .span1 {
    font-size: 12px;
    line-height: 20px;
  }

  .span2 {
    font-size: 12px;
    line-height: 30px;
  }

  .sumbit .van-button--info {
    background-color: rgb(76, 217, 100);
    /* bor */
  }

  .imgLogin {
    position: absolute;
    right: 60px;
    top: 110px;
  }

  .smallTip {
    position: absolute;
    right: 15px;
    top: 110px;
    font-size: 12px;
  }

  .smallTip div:nth-of-type(2) {
    color: #3b95e9;
    line-height: 20px;
  }

  .img1 {
    width: 60px;
    height: 30px;
  }

  p {
    color: rgb(49, 144, 232);
    margin-left: 270px;
    margin-top: 20px;
    font-size: 14px;
  }
</style>